<template>
  <div class="login-view">
    <section class="login-box">
      <div class="login-box-header">
        <img
          class="login-box-logo"
          :src="require('@/assets/logo.png')"
          alt="logo"
        />
        <span class="login-box-title">{{ title }}</span>
      </div>
      <a-form class="login-box-form" :form="form">
        <a-form-item>
          <a-input
            v-decorator="[
              'uname',
              { rules: [{ required: true, message: '请输入用户名!' }] },
            ]"
            placeholder="请输入用户名"
          >
            <a-icon
              slot="prefix"
              type="user"
              style="color: rgba(0, 0, 0, 0.25);"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
              'password',
              {
                rules: [
                  { required: true, message: 'Please input your Password!' },
                ],
              },
            ]"
            type="password"
            placeholder="请输入密码"
          >
            <a-icon
              slot="prefix"
              type="lock"
              style="color: rgba(0, 0, 0, 0.25);"
            />
          </a-input>
        </a-form-item>
      </a-form>
      <a-button class="login-box-button" type="primary" @click="handleLogin">
        登录
      </a-button>
    </section>
  </div>
</template>

<script>
import { Form, Input, Button, Icon } from 'ant-design-vue'

import { APILogin } from '@/api/auth'

const { title } = require('../../base.config')

export default {
  name: 'Login',
  components: {
    Form,
    FormItem: Form.Item,
    Input,
    Button,
    Icon,
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'login' }),
      title,
    }
  },
  methods: {
    handleLogin() {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          const res = await APILogin(values)
          console.log('res', res)
          if (res.success) {
            sessionStorage.setItem(`token`, res.data.token)
            this.$router.push('/')
          }
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import "~@/styles/vars.less";
@import '~@/styles/cover.less';
.login-view {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #41b883, #34495e);
  display: flex;
  justify-content: center;
  align-items: center;

  .login-box {
    border: 1px solid #ececec;
    background: #fcfcfc;
    width: 60%;
    border-radius: 8px;
    box-shadow: 0 0 10px #ccc;
    display: flex;
    flex-direction: column;
    padding: 32px 0;
    align-items: center;

    &-header {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
    }

    &-logo {
      height: 24px;
    }

    &-title {
      font-weight: bold;
      font-size: 24px;
      background: linear-gradient(135deg, #41b883, #34495e);
      background-clip: text;
      color: transparent;
      margin-left: 6px;
    }

    &-form {
      width: 80%;
      /deep/ .ant-input {
    background-color: transparent;
    color: @dark-color;
  }
    }

    &-button {
      width: 80%;
      background: linear-gradient(135deg, #41b883, #34495e);
      border-color:  @dark-color-6;
    }
  }
}
</style>
